import React, {useEffect, useState} from 'react';
import axios from "axios";
import {PageHeader, Card, Col, Row, List} from 'antd';
import {RightOutlined} from '@ant-design/icons';

export default function News() {

    const [newsList,setnewsList] = useState([])

    useEffect(() => {
        axios.get(`news/?publishState=2&expand=category`).then(res => {
            console.log(res.data)
            console.log(Object.entries(_.groupBy(res.data, item => item.category.title)))
        })
    },[])

    return (
        <div>
            <PageHeader
                className="site-page-header"
                title="全球大新闻"
                subTitle="全世界最好的新闻平台"
            />
            <div className="site-card-wrapper"  style={{padding:'0 20px 0 20px'}}>
                <Row gutter={[16,24]}>
                    <Col span={8}>
                        <Card title="Default size card" hoverable={true} extra={<a href="#">更多<RightOutlined style={{fontSize:'12px',height:'24px',lineHeight:'24px'}} /></a>}>
                            <List
                                pagination={{
                                    pageSize: 3,
                                    // simple: true,
                                }}
                                dataSource={['111','222','333','444','5555','666','777','8888','999']}
                                renderItem={item => (
                                    <List.Item>
                                        <a href={`#/news-manage/preview/${item.id}`}>{item}</a>
                                    </List.Item>
                                )}
                            />
                        </Card>
                    </Col>
                </Row>
            </div>
        </div>
    )
}